require('./PageGeneralcoursedetail.styl');

const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
import { Boxs, NavBar, Context } from 'saltui';
import { Control } from 'react-keeper';
const { HBox, Box, VBox } = Boxs;
const classNames = require("classnames");
const titles = ["选修课程", "时间节次", "授课老师", "授课地点"];
class Generalcoursedetail extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            listData: [],
            courseName: '',
            room: '',
            teacherName: ''
        };
        this.handleClickAppend = this.handleClickAppend.bind(this);
        this.renderDetailItem = this.renderDetailItem.bind(this);
        this.renderAppendItem = this.renderAppendItem.bind(this);
    }
    handleOnLeftClick() {
        Control.go(-1)
    }
    handleClickAppend(classEleId) {
        Actions.appendClass({ classEleId });
    }
    handleClickFooter() {
        let { eleStuId } = Control.state;
        if (eleStuId) {
            Actions.removeGeneralCourse({ eleStuId })
        }

    }
    //选课详情页
    renderAppendItem() {
        return <div className="generalcoursedetail-content">
            <div className="t-LH25 generalcoursedetail-content-head">
                {Control.state.grade && <span>{Control.state.grade}年</span>}
                {Control.state.term && <span>第{Control.state.term == 2 ? '二' : '一'}学期</span>}
            </div>
            {
                this.state.listData.map((item, index) => {
                    return (
                        <HBox vAlign="center" data-id={index} className="generalcoursedetail-list" key={index} onClick={this.handleClick}>
                            <Box data-id={index} flex={1}>
                                <p className="generalcoursedetail-list-courseName">{item.courseName}</p>
                                <p className="t-MT10">{item.room}</p>
                            </Box>
                            <Box data-id={index} flex={1}>
                                <p>{item.teacherName}</p>
                                <p className="t-MT10"><span className="generalcoursedetail-list-electiveNumber">{item.electiveNumber}</span>/{item.totalNumber}</p>
                            </Box>
                            <Box onClick={this.handleClickAppend.bind(this, item.classEleId)} data-id={index} flex={1} className="t-FAR" ><span className="generalcoursedetail-list-circle">添加</span></Box>
                        </HBox>
                    );
                })
            }
        </div>
    }
    //已选课程详情
    renderDetailItem(status) {
        return (
            <div className="generalcoursedetail-content">
                <div className="t-PT10 t-PB5 generalcoursedetail-content-info">
                    {titles.map((item, index) => {
                        let num = -1;
                        return (
                            <HBox className="t-PT10 t-PB5">
                                <Box flex={1} className="t-FAC">
                                    {item}
                                </Box>
                                <Box flex={3} className="generalcoursedetail-content-right">
                                    {index == 0 && this.state.courseName}
                                    {index == 1 && this.state.pitchName &&
                                        this.state.pitchName.map((subitem, subindex) => {
                                            num = subindex + 1;
                                            if (num % 2 != 0) {
                                                return <p>{subitem + (num < this.state.pitchName.length ? '、' : '')}{num < this.state.pitchName.length && (this.state.pitchName[num] + '、')}</p>
                                            } else {
                                                return null;
                                            }
                                        })
                                    }
                                    {index == 2 && this.state.teacherName}
                                    {index == 3 && this.state.room}
                                </Box>
                            </HBox>
                        )
                    })}
                   {status==2&&<footer >
                        <HBox className="t-FAC">
                            <Box flex={1} onClick={this.handleClickFooter} className="fs18">
                                退课
                            </Box>
                        </HBox>
                    </footer>}
                </div>
                <div className="t-MT20 generalcoursedetail-content-brief">
                    <VBox>
                        <Box>老师简介</Box>
                        <Box className="generalcoursedetail-content-courseIntroduce"></Box>
                    </VBox>
                    <VBox className="t-MT10">
                        <Box>课程简介</Box>
                        <Box className="generalcoursedetail-content-courseIntroduce">{this.state.courseIntroduce}</Box>
                    </VBox>
                </div>
            </div>
        )
    }
    renderContent(status) {
        if (status == 3 || status == 2) {
            return this.renderDetailItem(status)
        } else if (status == 1) {
            return this.renderAppendItem()
        }
    }
    render() {
        let content = this.renderContent(Control.state.status)
        return (
            <div className="generalcoursedetail">
                <NavBar
                    className={classNames({ "ios-nav-bar": window.isIphone })}
                    isShow={false}
                    title={Control.state.status == 3 ? '已选课' : Control.state.pitchName}
                    onLeftClick={this.handleOnLeftClick.bind(this)}
                    onRightClick={Context.noop}
                    rightText=''
                />
                {content}
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
        if (Control.state.status == 3 || Control.state.status == 2) {
            Actions.fetchDetail({ ...Control.state });
        } else if (Control.state.status == 1) {
            Actions.fetch({ ...Control.state });
        }
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Generalcoursedetail, Reflux.connect(Store));

module.exports = Generalcoursedetail;
